<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const sendemail = () => {
    router.push('/captcha')
}
const phone = ref('')
</script>

<template>
    <img id="back" src="@/assets/register/back.png" alt="" @click="router.go(-1)">
    <div id="register">新用户注册</div>

    <div id="phone">手机号码</div>
    <div class="phone">
        <div id="a86">+86</div>
        <img id="down" src="@/assets/register/down.png" alt="">
        <input type="text" placeholder="请输入手机号码" v-model="phone">
        <img id="line" src="@/assets/register/line.png" alt="">
    </div>
    <img id="button" src="@/assets/register/button.png" alt="" @click="sendemail">
    <div class="agree">
        <input type="radio" />
        <span id="iagree">我已阅读并同意</span>
        <span id="items">《用户协议》《隐私政策》</span>
    </div>
</template>

<style scoped lang="less">
#status {
    width: 390px;
    height: 44px;
    background-color: rgba(248, 248, 248, 1);
}

#back {
    margin-left: 19px;
    margin-top: 20px;
    width: 20px;
    height: 20px;
}

#register {
    margin-top: 60px;
    margin-left: 20px;
    width: 140px;
    height: 40px;
    line-height: 40px;
    color: rgb(64, 64, 64);
    font-size: 28px;
    text-align: left;
    font-family: PingFangSC-regular;
}

#phone {
    margin-top: 74px;
    margin-left: 20px;
    width: 56px;
    height: 20px;
    line-height: 20px;
    color: rgba(64, 64, 64, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;

}

.phone {
    height: 54px;
    width: 390px;
    position: relative;


    #a86 {
        position: absolute;
        bottom: 10px;
        left: 15px;
        width: 33px !important;
        height: 25px !important;
        line-height: 25px;
        color: rgba(64, 64, 64, 1);
        font-size: 18px;
        font-family: PingFangSC-regular;
    }

    #down {
        position: absolute;
        left: 60px;
        bottom: 10px;
        width: 18px;
        height: 18px;
    }

    input {
        position: absolute;
        left: 93px;
        bottom: 10px;
        width: 225px;
        height: 30px;
        line-height: 20px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(191, 191, 191, 1);
        font-size: 18px;
        text-align: left;
        font-family: Microsoft Yahei;
        border: 0;
    }

    #line {
        position: absolute;
        left: 20px;
        bottom: 0px;
        width: 335px;
        height: 1px;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(217, 217, 217, 1);
    }
}

#button {
    margin-top: 20px;
    margin-left: 20px;
    width: 335px;
    height: 49px;
    line-height: 26px;
    border-radius: 5px;
    background-color: rgba(24, 144, 255, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    text-align: center;
    font-family: Roboto;
}

.agree {
    margin-top: 20px;
    margin-left: 20px;

    input {
        width: 20px;
        height: 20px;
    }

    #iagree {
        position: relative;
        bottom: 5px;
        margin-left: 5px;
        width: 100px;
        height: 20px;
        line-height: 20px;
        color: rgba(153, 153, 153, 1);
        font-size: 14px;
        text-align: left;
        font-family: PingFangSC-regular;
    }

    #items {
        position: relative;
        bottom: 5px;
        width: 166px;
        height: 20px;
        line-height: 20px;
        color: rgba(34, 159, 248);
        font-size: 14px;
        text-align: left;
        font-family: PingFangSC-regular;
    }
}
</style>